<template>
<el-card class="box-construction" shadow="always">
    <div class="box-title box-title-position">
        <div>菜单管理</div>
    </div>
    <div class="searchDiv">
        <el-row :gutter="20">
            <el-col :span="6"><el-input v-model="search.blurry" placeholder="请输入内容" size="small" clearable></el-input></el-col>
            <el-col :span="2"> <el-button type="primary" size="small" icon="el-icon-search" @click="getMenusBySearch">搜索</el-button></el-col>
            <el-col :span="2"><el-button type="warning" icon="el-icon-refresh-right" size="small" @click="reset">重置</el-button></el-col>
        </el-row>
    </div>
    <div class="operation">
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        <el-button size="mini" type="success" icon="el-icon-edit" :disabled="editStatus" @click="edit">修改</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" :disabled="deleteStatus" @click="handleMutiDelete">删除</el-button>
    </div>
  <el-table
    :data="tableData"
    row-key="menuId"
    ref="table"
    lazy
    v-if="visible"
    :load="load"
    style="width: 100%"
    @select-all="selectAllChange"
    @select="handleSelectionChange"
    :tree-props="{children: 'children',hasChildren: 'hasChildren' }">
        <el-table-column
        type="selection"
        width="60">
        </el-table-column>
        <el-table-column
        :key="item.prop"
        v-for="item in cols"
        :prop="item.prop"
        :label="item.name"
        :width="item.width?item.width:'160'">
        <template slot-scope="scope" >
            <i :class="[scope.row.icon]" style="fontSize:20px" v-if="item.prop==='icon'"></i>
            <template v-else-if="item.prop==='hidden'">
                <span v-if="scope.row.hidden">是</span>
                <span v-else>否</span>  
            </template>
            <span v-else>{{scope.row[item.prop]}}</span>
        </template>
        </el-table-column>
        <el-table-column
            prop="title"
            label="操作"
            fixed="right"
            width="180"
        >
        <template slot-scope="scope">
            <el-button type="primary" style="display:inline-block" size="mini" @click="handleEdit(scope.row)" icon="el-icon-edit"></el-button>
            <el-button type="danger" style="display:inline-block" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
        </template>
        </el-table-column>
  </el-table>
   <add-menu ref="addMenu" @refreshData="loadMenu"></add-menu>
</el-card>
</template>
<script>
import addMenu from './add.vue'
import menuApi from '@apis/menu'
export default {
    components:{addMenu},
    data(){
        return {
            cols:[{
                prop: 'title',
                name: '菜单标题',
                width: '250'
            },{
                prop: 'icon',
                name: '图标'
            },{
                prop: 'menuSort',
                name: '排序'
            },{
                prop: 'permission',
                name: '权限标识'
            },{
                prop: 'path',
                name: '路由'
            },{
                prop: 'pcomponentath',
                name: '组件路径'
            },{
                prop: 'hidden',
                name: '是否隐藏'
            },{
                prop: 'createTime',
                name: '创建日期'
            }],
            selectRow: [],
            tableData: [],
            visible: true,
            search:{
                blurry: ''
            }
             
      }
    },
    computed:{
        editStatus (){
            return this.selectRow.length>1 || this.selectRow.length===0
        },
        deleteStatus (){
            return this.selectRow.length===0
        }
    },
    created(){
        this.loadMenu(0)
    },
    methods: {
        handleSelectionChange(selection,row){
            this.selectRow = selection
            if(row.children){
                const checked = !!row.isChecked
                this.toggleChildren(row,checked)
            }
        },
        edit(){
            this.handleEdit(this.selectRow[0])
        },
        handleEdit(data){
            this.$refs.addMenu.setForm({...data})
            this.$refs.addMenu.toggleVisible()
        },
        handleAdd(){
            this.$refs.addMenu.setForm()
            this.$refs.addMenu.toggleVisible()
        },
        handleMutiDelete(){
            const deleteArr = this.selectRow.map(item=>item.menuId)
            this.delete(deleteArr)
        },
        reset(){
            this.search.blurry = ''
            this.loadMenu()
        },
        getMenusBySearch(){
            if(!this.search.blurry){
                this.reset()
                return
            }
            menuApi.getMenusBySearch({...this.search}).then(res=>{
                this.tableData = res
            }).catch(err=>{
                this.$message.error(err.message)
            })
        },
        loadMenu(pid=0){
            this.visible = false
            this.$nextTick(()=>{
                this.visible = true
            })
            menuApi.getMenus(pid).then(res=>{
                this.tableData = res
                 this.$nextTick(()=>{
                this.$refs.table.doLayout()
            })
            }).catch(err=>{
                this.$message.error(err.message)
            })
        },
        load(tree, treeNode, resolve){
            menuApi.getMenus(tree.menuId).then(res=>{
                if(tree.title){
                    res.map(item=>{
                        item.pTitle=tree.title
                    })
                }
                // 改变 tableData
                this.tableData.map(item=>{
                    this.createData(item,tree.menuId,res)
                })
                resolve(res)
            })
        },
        createData(data,checkId,res){
            if(data.menuId === checkId){
                data.children = Array.isArray(data.children)?data.children:[]
                data.children = res
                return true
            }else{
                if(data.children){
                    data.children.map(i=>{
                        this.createData(i,checkId,res)
                    })
                }
            }
        },
        delete(data){
             menuApi.deleteMenu(data).then(res=>{
                this.loadMenu(0)
                this.$message.success('删除成功')
            }).catch(err=>{
                this.$message.error('操作失败')
            })
        },
        handleDelete(data){
            if(!data.menuId){
                this.$message.error('请先选择节点')
                return
            }
            this.$confirm(`确定删除（${data.title}）？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.delete([data.menuId])  
            })
        },
        selectAllChange(selection){
            let data = this.$refs.table.data
             const checked = !!data[0].isChecked
            data.map(item=>{
                // const checked = !!item.isChecked
                this.toggleChildren(item,checked)
            })
        },
        toggleChildren(item,checked){
            if(item.children){
                if(!checked){
                    this.$refs.table.toggleRowSelection(item,true)
                    item.isChecked = true
                    item.children.map(i=>{
                        this.toggleChildren(i,checked)
                    })
                }else{
                    this.$refs.table.toggleRowSelection(item,false)
                    item.isChecked = false
                    item.children.map(i=>{
                        this.toggleChildren(i,checked)
                    })
                }
            }else{
                if (!checked){
                    item.isChecked = true
                    this.$refs.table.toggleRowSelection(item,true)
                } 
                else{
                    item.isChecked = false
                    this.$refs.table.toggleRowSelection(item,false)
                }
            }
        }
    }
    
}
</script>

<style lang="scss" scoped>
.box-construction{
    .operation{
        margin: 10px 0px;
    }
    ::v-deep .searchDiv{
        margin: 10px 0px;
    }
}

</style>